<template>
	<view class="backdrop">
		<view class="toubu">
			<image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="handleClick"></image>
			<p class="MainTitle">文创艺术</p>
		</view>
		
		<view class="zhuti">
			
				<input
				 v-model="inputValue"
				 class="my-input"
				 type="text"
				 placeholder="请输入作品名称"
				 
				 @confirm="addMessage"/>
			<view class="zuopinname">作品名称 :</view>
			<input
				 v-model="inputValue1"
				 class="my-input1"
				 type="text"
				 placeholder="请输入作品名称"
				 
				 @confirm="addMessage"/>
			<view class="zuopinname1">选择作品类型 :</view>
			<image class="jiantou" :src="imageUrl + '/wenchuangyishu/wenchuangyishudayuhao.png'" mode=""></image>
			<view class="zuopinname2">作品简介 :</view>
			<input
				 v-model="inputValue2"
				 class="my-input2"
				 type="text"
				 placeholder="请输入作品名称"
				 
				 @confirm="addMessage"/>
			<image class="shanchuan" :src="imageUrl + '/wenchuangyishu/wenchuangyishushangchuntupian.png'" mode=""></image>
			<image class="jiahao" :src="imageUrl + '/wenchuangyishu/wenchuangyishujaihao.png'" mode=""></image>
			<p style="color: #787878;font-size: 14px;font-weight: 560;">比例2：1 最多上传三张</p>
			<image class="shanchuan" :src="imageUrl + '/wenchuangyishu/wenchuangyishushangchuntupian.png'" mode=""></image>
			<image class="jiahao" :src="imageUrl + '/wenchuangyishu/wenchuangyishujaihao.png'" mode=""></image>
			<image class="tijiao" :src="imageUrl + '/wenchuangyishu/wenchuangyishutijiao.png'" mode="" @click="tijiaoshenhe"></image>
			<p style="color: #787878;font-size: 14px;font-weight: 560;">比例2：1 最多上传三张</p>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				imageUrl: this.$imageUrl,
				inputValue: '',
				inputValue1: '',
				inputValue2: '',
			}
		},
		methods:{
			handleClick() {
				wx.redirectTo({
					url: '/pagesNew/pages-Cultural-and-Creative/Cultural-and-Creative-Product',
				});
			},
			tijiaoshenhe() {
				uni.showToast({
				        title: '提交成功',
				        icon: 'none'
				      });
			}
		}
	}
</script>

<style>
	.zuopinname2 {
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 28rpx;
	    color: #33333;
	    line-height: 32rpx;
	    position: relative;
	    top: -6rpx;
	    left: 40rpx;
	}
	.zuopinname1 {
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 28rpx;
	    color: #33333;
	    line-height: 32rpx;
	    position: relative;
	    top: -76rpx;
	    left: 40rpx;
	}
	.zuopinname {
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 28rpx;
	    color: #33333;
	    line-height: 32rpx;
	    position: relative;
	    top: -76rpx;
	    left: 40rpx;
	}
	.my-input2 {
	    z-index: 2;
	    width: 458rpx;
	    height: 104rpx;
	    margin-top: -72rpx;
	    /* margin-left: 40rpx; */
	    background: white;
	    border-radius: 12rpx;
	    font-size: 28rpx;
	    color: black;
	    background-repeat: no-repeat;
	    /* background-position: right center; */
	    padding-right: 20rpx;
	    padding-left: 200rpx;
	    padding-bottom: 580rpx;
	    display: inline-block;
	}
	.my-input1 {
	    z-index: 2;
	    width: 380rpx;
	    height: 104rpx;
	    /* margin-top: 180rpx; */
	    /* margin-left: 40rpx; */
	    padding-left: 60rpx;
	    background: white;
	    border-radius: 12rpx;
	    font-size: 28rpx;
	    color: black;
	    background-repeat: no-repeat;
	    background-position: right center;
	    padding-right: 58rpx;
	    padding-left: 240rpx;
	    display: inline-block;
	}
	.my-input {
	    z-index: 2;
	    width: 478rpx;
	    height: 104rpx;
	    /* margin-top: 180rpx; */
	    /* margin-left: 40rpx; */
	    padding-left: 60rpx;
	    background: white;
	    border-radius: 12rpx;
	    font-size: 28rpx;
	    color: black;
	    background-repeat: no-repeat;
	    background-position: right center;
	    padding-right: 20rpx;
	    padding-left: 180rpx;
	    display: inline-block;
	}
	.tijiao {
	    width: 272rpx;
	    height: 88rpx;
	    position: relative;
	}
	.jiahao {
	    width: 56rpx;
	    height: 56rpx;
	    position: relative;
	    top: -70rpx;
	    left: -110rpx;
	}
	.shanchuan {
	    width: 160rpx;
	    height: 160rpx;
	    margin-top: 40rpx;
	}
	.shurus {
	    font-size: 30rpx;
	    font-weight: 550;
	    display: block;
	    margin-top: -38rpx;
	    margin-left: 40rpx;
	}
	.jianjie {
	    width: 678rpx;
	    height: 688rpx;
	    background-color: #ffffff;
	    border-radius: 20rpx;
	}
	.jiantou {
	    width: 30rpx;
	    height: 30rpx;
	    position: relative;
	    top: -110rpx;
	    left: 620rpx;
	}
	.zhuti {
	    width: 678rpx;
	    margin-left: 46rpx;
	    margin-top: 180rpx;
	}
	.MainTitle {
	    color: #40564a;
	    font-weight: 550;
	    text-align: center;
	    margin-top: 116rpx;
	}
	.toubu {
	    position: fixed;
	    width: 100vw;
	    height: 180rpx;
	    background-color: #e4ebe9;
	    z-index: 99;
	}
	.backdrop {
	    background-color: #e4ebe9;
	    height: 100vh;
	    width: 100vw;
	    position: fixed;
	    top: 0;
	    left: 0;
	    overflow: auto;
	    overflow-x: hidden;
	}
	.fanhui {
	    width: 38rpx;
	    height: 38rpx;
	    margin-top: 116rpx;
	    margin-left: 20rpx;
	    position: fixed;
	}
</style>